<template>
  <div class="home">
    <!-- 搜索框 -->
    <van-search
      @focus="$router.push('/popup')"
      v-model="value"
      placeholder="请输入搜索关键词"
    />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        class="my-swipe-item"
        v-for="item in banner"
        :key="item.id"
      >
        <img class="swiperImg" :src="item.image_url" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 频道导航 -->
    <van-grid :column-num="5">
      <van-grid-item
        @click="$router.push(item.url)"
        v-for="item in channel"
        :key="item.id"
        :icon="item.icon_url"
        :text="item.name"
      />
    </van-grid>
    <!-- 品牌制作 -->
    <myTitleBox title="品牌制造商直供" addTop="true" />
    <van-row gutter="5" class="brandList">
      <van-col
        class="brandList-item"
        v-for="item in brandList"
        :key="item.id"
        span="12"
        ><img class="brandList-img" :src="item.pic_url" alt="" />
        <p class="brandList-title">{{ item.name }}</p>
        <span class="brandList-price">{{
          item.floor_price | formatPrice
        }}</span>
      </van-col>
    </van-row>
    <!-- 新品首发 -->
    <myTitleBox title="周一周四·新品首发" addTop="true" />
    <van-grid class="newGoods" :border="false" :column-num="2">
      <van-grid-item v-for="item in newGoodsList" :key="item.id">
        <van-image :src="item.list_pic_url" />
        <p class="newGoods-title">{{ item.name }}</p>
        <span class="newGoods-price">{{
          item.retail_price | formatPrice
        }}</span>
      </van-grid-item>
    </van-grid>
    <!-- 人气推荐 -->
    <myTitleBox title="人气推荐" addTop="true" />
    <ul class="renqiBox">
      <li class="renqiBox-item" v-for="item in hotGoodsList" :key="item.id">
        <van-card :thumb="item.list_pic_url">
          <template #title>
            <p class="renqiBox-title">{{ item.name }}</p>
          </template>
          <template #desc>
            <p class="renqiBox-desc">{{ item.goods_brief }}</p>
          </template>
          <template #price>
            <p class="renqiBox-price">{{ item.retail_price | formatPrice }}</p>
          </template>
        </van-card>
      </li>
    </ul>
    <!-- 专题精选 -->
    <myTitleBox title="专题精选" addTop="true" />
    <!-- 专题精选轮播图 -->
    <van-swipe
      :show-indicators="false"
      class="jingxuanSwipe"
      :loop="false"
      :width="300"
    >
      <van-swipe-item
        class="jingxuanSwipe-item"
        v-for="(item, index) in topicList"
        :key="index"
      >
        <div class="img">
          <img class="jingxuan-img" :src="item.scene_pic_url" alt="" />
        </div>
        <div class="textBox">
          <span class="jingxuan-title">{{ item.title }}</span>
          <span class="jingxuan-price">{{
            item.price_info | formatPrice
          }}</span>
        </div>
        <p class="jingxuan-detail">
          {{ item.subtitle }}
        </p>
      </van-swipe-item>
    </van-swipe>
    <!-- 分类商品 -->
    <ul class="categroy">
      <li
        v-for="(item, index) in categoryList"
        :addTop="index == 0 ? true : false"
        :key="item.id"
      >
        <myTitleBox :title="item.name" />
        <van-grid class="newGoods" :border="false" :column-num="2">
          <van-grid-item v-for="citem in item.goodsList" :key="citem.id">
            <van-image :src="citem.list_pic_url" />
            <p class="newGoods-title">{{ citem.name }}</p>
            <span class="newGoods-price">{{
              citem.retail_price | formatPrice
            }}</span>
          </van-grid-item>
        </van-grid>
      </li>
    </ul>
  </div>
</template>

<script>
import { getHomeDataAPI } from "@/request/api";
import myTitleBox from "@/components/MyTitleBox.vue";
export default {
  name: "Home",
  created() {
    getHomeDataAPI().then((res) => {
      console.log(res);
      if (res.errno != 0) return;
      let {
        banner,
        categoryList,
        brandList,
        channel,
        hotGoodsList,
        newGoodsList,
        topicList,
      } = res.data;
      this.banner = banner;
      this.categoryList = categoryList;
      this.brandList = brandList;
      this.channel = channel;
      this.hotGoodsList = hotGoodsList;
      this.newGoodsList = newGoodsList;
      this.topicList = topicList;
      console.log(res.data.banner);
    });
  },

  components: { myTitleBox },
  data() {
    return {
      value: "",
      banner: [],
      categoryList: [],
      brandList: [],
      channel: [],
      hotGoodsList: [],
      newGoodsList: [],
      topicList: [],
    };
  },
  // filters: {
  //   //格式化价格
  //   formatPrice(price) {
  //     return "￥" + price.toFixed(2) + "元";
  //   },
  // },
};
</script>
<style lang="less">
.my-swipe {
  // height: 2rem;
  // height: calc(100vw * 400) / 750;

  .my-swipe-item {
    // height: 100%;
    // height: calc(100vw * 400) / 750;
  }
  .swiperImg {
    width: 100vw;
    // height: 100%;
    height: 53vw;
  }
}

//品牌制作
.brandList {
  .brandList-item {
    background-color: rgb(255, 255, 255);
    position: relative;
    .brandList-title {
      position: absolute;
      top: 0.1rem;
      left: 0.1rem;
      font-size: 0.16rem;
    }
    .brandList-price {
      position: absolute;
      top: 0.4rem;
      left: 0.1rem;
      color: darkred;
      font-size: 0.16rem;
    }
    .brandList-img {
      width: 100%;
    }
  }
}
//新品首发
.newGoods {
  background-color: #fff;
  .newGoods-title {
    text-align: center;
    line-height: 0.3rem;
    font-size: 0.16rem;
    width: 1.5rem;
    overflow: hidden; /*超出部分隐藏*/
    white-space: nowrap; /*不换行*/
    text-overflow: ellipsis; /*超出部分文字以...显示*/
  }
  .newGoods-price {
    color: darkred;

    font-size: 0.16rem;
  }
}
//人气推荐
.renqiBox {
  background-color: #fff;
  .renqiBox-item {
    margin-bottom: 0.1rem;
    .renqiBox-title {
      line-height: 0.3rem;
      font-size: 0.18rem;
      font-weight: 500;
    }
    .renqiBox-desc {
      line-height: 0.3rem;
    }
    .renqiBox-price {
      color: darkred;
    }
  }
}
//专题精选
.jingxuanSwipe {
  background-color: #fff;

  .jingxuanSwipe-item {
    height: 100%;
  }
  .img {
    padding: 10px;
    .jingxuan-img {
      width: 100%;
      height: 1.68rem;
    }
  }
  .textBox {
    padding: 0 0.1rem;
    display: flex;
    justify-content: space-between;

    height: 0.2rem;

    .jingxuan-title {
      font-size: 0.18rem;
      line-height: 0.2rem;
      overflow: hidden; /*超出部分隐藏*/
      white-space: nowrap; /*不换行*/
      text-overflow: ellipsis; /*超出部分文字以...显示*/
    }

    .jingxuan-price {
      white-space: nowrap; /*不换行*/

      line-height: 0.2rem;
      font-size: 0.18rem;
      color: darkred;
    }
  }
  .jingxuan-detail {
    padding: 0 0.1rem;
    overflow: hidden; /*超出部分隐藏*/
    white-space: nowrap; /*不换行*/
    text-overflow: ellipsis; /*超出部分文字以...显示*/
    font-size: 0.16rem;
    line-height: 0.4rem;
  }
}
</style>
